
// {bem_b,bem_e,VueAndNvueStyleAttr}
@use "./mixin/mixins.scss" as *;
@use './mixin/function.scss' as *;

@import "common/index.scss";

@include bem_b(switch) {
  @include flex(row);
  /* #ifndef APP-NVUE */
  box-sizing: border-box;
  /* #endif */
  position: relative;
  background-color: #fff;
  border-width: 1px;
  border-radius: 100px;
  transition: background-color 0.4s;
  border-color: rgba(0, 0, 0, 0.12);
  border-style: solid;
  justify-content: flex-end;
  align-items: center;
  // 由于weex为阿里逗着玩的KPI项目，导致bug奇多，这必须要写这一行，
  // 否则在iOS上，点击页面任意地方，都会触发switch的点击事件
  overflow: hidden;
  @include bem_e(slot){
	  position: absolute;
	  left: 0;
	  right: 0;
	  top: 0;
	  bottom: 0;
	  z-index: 2
  }
  @include bem_e(node) {
    @include flex(row);
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    // background-color: #fff;
    border-radius: 100px;
    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
    transition-property: transform;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05);
	z-index: 3;
	&--on{
		@include VueAndNvueStyleAttr('background-color','switch', 'on-bg');
	}
	&--off{
		@include VueAndNvueStyleAttr('background-color','switch', 'off-bg');
	}
  }
  @include bem_e(bg) {
    position: absolute;
    border-radius: 100px;
    background-color: #ffffff;
    transition-property: transform;
    transition-duration: 0.4s;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    transition-timing-function: ease;
	z-index: 1;
  }
  @include when(disabled) {
    opacity: 0.6;
  }
}
